<template>
	<view class="container">
		<view style="flex:1">
			<view class="main">
				<view style="padding: 30rpx 34rpx 0;">
					<view class="step">
						<view class="title">
							<view>第3步</view>
							<view class="" style="padding-left: 24rpx;">
								二维码扫码核身
							</view>
						</view>
						<view class="num">
							3/3
						</view>
					</view>
				</view>
				<view class="phone">
					<view class="pic">
						<image class="code" :src="codeImg" mode=""></image>
					</view>



					<view class="submit" @click="saveImg">
						保存
					</view>
				</view>
				<view class="note">
					<view>note:</view>
					<view class="">
						1.保存此二维码到手机相册或者截屏保存
					</view>
					<view>
						2.用微信中的“扫一扫”进行人脸核身，完成实名认证
					</view>

				</view>
			</view>
		</view>
		<view class="copyright">
			Copyright © 2024-2025 中检集团 版权所有
		</view>
	</view>
</template>

<script>
	import {
		get_code_api
	} from '@/common/api.js'
	import {
		Base64
	} from "@/js_sdk/js-base64/base64.js"
	export default {
		data() {
			return {
				codeImg: ''
			}
		},
		onLoad({
			phone
		}) {
			this.getCode(Base64.decode(phone))
		},
		methods: {
			getCode(phone) {
				get_code_api({
					phone
				}).then(res => {
					this.codeImg = res.data
				})
			},
			saveImg() {
				uni.downloadFile({
					url: this.codeImg, //仅为示例，并非真实的资源
					success: (res) => {
						console.log(res)
						if (res.statusCode === 200) {
							var oA = document.createElement("a");
							oA.download = ''; // 设置下载的文件名，默认是'下载'
							oA.href = res.tempFilePath; //临时路径再保存到本地
							document.body.appendChild(oA);
							oA.click();
							oA.remove(); // 下载之后把创建的元素删除
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		flex: 1;
		display: flex;
		flex-direction: column;
		padding: 52rpx 24rpx 0;

		.main {
			background-color: #fff;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			padding-bottom: 26rpx;

			.step {
				border-bottom: 2rpx solid #E7E7E7;
				display: flex;
				justify-content: space-between;
				padding-bottom: 20rpx;


				.title {
					display: flex;
					font-size: 36rpx;
					font-weight: 500;
					color: #303133;
					line-height: 56rpx;
				}

				.num {
					font-size: 32rpx;
					font-weight: 500;
					color: #303133;
					line-height: 56rpx;
				}
			}

			.phone {

				margin: 0 34rpx;

				.pic {
					display: flex;
					justify-content: center;
					padding-top: 154rpx;
				}

				.code {
					width: 402rpx;
					height: 402rpx;
				}




				.submit {
					width: 196rpx;
					height: 80rpx;
					line-height: 80rpx;
					background: #43B0E8;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					font-size: 32rpx;
					color: #fff;
					text-align: center;
					margin: 0 auto;
					margin-top: 128rpx;
					margin-bottom: 74rpx;
				}
			}

			.note {
				margin: 0 34rpx;
				font-size: 28rpx;
				color: #909399;
				line-height: 50rpx;
			}

		}

		.copyright {
			margin-top: 154rpx;
			padding-bottom: 34rpx;
			font-size: 28rpx;
			color: #FFFFFF;
			text-align: center;
		}
	}
</style>